<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/jquery-3.7.1.min.js"></script>
    <script src="../js/bootstrap.bundle.js"></script>
    <title>导航</title>
</head>

<body>
    <!-- 默认导航 -->
    <nav class="nav">
        <!-- .active可以让导航项处于激活状态 -->
        <a href="#" class="nav-item nav-link active">首页</a>
        <a href="#" class="nav-item nav-link ">关于</a>
        <a href="#" class="nav-item nav-link ">联系我们</a>
    </nav>
    <hr>
    <!-- 选项卡导航 -->
    <nav class="nav nav-tabs">
        <a href="#" class="nav-item nav-link active">首页</a>
        <a href="#" class="nav-item nav-link ">关于</a>
        <a href="#" class="nav-item nav-link ">联系我们</a>
    </nav>
    <hr>
    <!-- 胶囊导航 -->
    <nav class="nav nav-pills">
        <a href="#" class="nav-item nav-link ">首页</a>
        <a href="#" class="nav-item nav-link ">关于</a>
        <a href="#" class="nav-item nav-link active">联系我们</a>
    </nav>
    <hr>
    <!-- 导航的水平对齐 -->
    <!-- 默认：水平居左对齐 -->
    <nav class="nav">
        <a href="#" class="nav-item nav-link active">首页</a>
        <a href="#" class="nav-item nav-link ">关于</a>
        <a href="#" class="nav-item nav-link ">联系我们</a>
    </nav>
    <!-- .justify-content-center设置为居中对齐 -->
    <nav class="nav justify-content-center">
        <a href="#" class="nav-item nav-link active">首页</a>
        <a href="#" class="nav-item nav-link ">关于</a>
        <a href="#" class="nav-item nav-link ">联系我们</a>
    </nav>
    <!-- .justify-content-end设置为居右对齐 -->
    <nav class="nav justify-content-end">
        <a href="#" class="nav-item nav-link active">首页</a>
        <a href="#" class="nav-item nav-link ">关于</a>
        <a href="#" class="nav-item nav-link ">联系我们</a>
    </nav>
    <hr>
    <!-- .flex-column让导航垂直排版 -->
    <nav class="nav flex-column">
        <a href="#" class="nav-item nav-link active">首页</a>
        <a href="#" class="nav-item nav-link ">关于</a>
        <a href="#" class="nav-item nav-link ">联系我们</a>
    </nav>
    <hr>
    <!-- nav-fill可以让导航延申并按比例填充所有可用宽度，而且可以被内容撑开 -->
    <nav class="nav nav-pills nav-fill">
        <a href="#" class="nav-item nav-link active">首页----------------------首页</a>
        <a href="#" class="nav-item nav-link ">关于</a>
        <a href="#" class="nav-item nav-link ">联系我们</a>
    </nav>
    <hr>
    <!-- .nav-justified 让每个导航项活动相同的宽度，不会被内容撑开 -->
    <nav class="nav nav-pills nav-justified">
        <a href="#" class="nav-item nav-link active">首页----------------------首页</a>
        <a href="#" class="nav-item nav-link ">关于</a>
        <a href="#" class="nav-item nav-link ">联系我们</a>
    </nav>
    <hr>
    <!-- 带下拉菜单的导航 -->
    <nav class="nav nav-tabs">
        <a href="#" class="nav-item nav-link active">首页</a>
        <a href="#" class="nav-item nav-link ">关于</a>
        <div class="nav-item dropdown">
            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">联系我们</a>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">邮箱</a>
                <a href="#" class="dropdown-item">手机号</a>
                <a href="#" class="dropdown-item">微信</a>
            </div>
        </div>
    </nav>
    <hr>
    <nav class="nav nav-pills">
        <a href="#" class="nav-item nav-link active">首页</a>
        <a href="#" class="nav-item nav-link ">关于</a>
        <div class="nav-item dropdown">
            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">联系我们</a>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">邮箱</a>
                <a href="#" class="dropdown-item">手机号</a>
                <a href="#" class="dropdown-item">微信</a>
            </div>
        </div>
    </nav>
</body>

</html>